<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .cus
        {
            /*绝对定位元素，不过，只相对浏览器窗口*/
            position: fixed;
            bottom: 30px;
            right: 20px;

            width: 60px;
            height: 260px;
            border: 1px solid #0ff;

            overflow: hidden;
        }
        .squ
        {
            /*四个小方块儿的大小*/
            width: 60px;
            height: 60px;
            background: #f00;
            border-radius: 5px;
            margin-top: 5px;
        }
        .as
        {
            position: absolute;
            bottom: 0;
            z-index: 2;
            /*原文
             * position: relative;
             * top: 260px; 
             * 但因为使用的是相对定位
             * .as的盒子初始位置是一直处于占用状态的
             * 所以，会发现父盒子.cus的高度会多出一个盒子的高度+margin-top
             */
        }

        .th
        {
            height: 195px;
            /*配合transform，形成一种缓慢动画效果*/
            transition: all 3.5s;


            /*下面三个属性更多是左右和高度居中*/
            overflow:hidden;
            text-align:center; 
            line-height:30px;
             /*前提：该元素的父元素处于定位状态，那么，top位置即为0
              * 这个200px，指的是该元素将要移动的距离。
              */
            /*这个是直接变换的效果，没有过度效果*/
            transform:translateY(200px);

            opacity:0;
        }
        /*父元素触发鼠标悬空时，子元素的样式变化*/
        .cus:hover .th {
            transform:translateY(0);
            opacity:1
        }
    </style>
</head>
<body>
    <div class="cus">
        <div class="squ as">1</div>
        <div class="th">
            <div class="squ">2</div>
            <div class="squ">3</div>
            <div class="squ">4</div>
        </div>
    </div>
</body>
</html>